﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>签到</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/adaptation.js"></script>
	</head>
	<body>
		<div id="wrap">
			<!--引导页-->
			<div class="page page-1">
				<img src="img/guide.jpg" alt="" />
				<!--打卡-->
				<a href="javascript:void(0);" class="clock"></a>
				<!--投票-->
				<a href="javascript:void(0);" class="vote"></a>
			</div>
			
			<!--活动主页-->
			<div class="page page-2">
				<img src="img/index-bg.jpg" alt="" />
				<a href="javascript:void(0);" class="item active" data-id="1">
					<i></i>
					<span>印象城</span>
				</a>
				
				<a href="javascript:void(0);" class="item" data-id="2">
					<i></i>
					<span>国际购物中心</span>
				</a>
				
				<a href="javascript:void(0);" class="item" data-id="3">
					<i></i>
					<span>天一广场</span>
				</a>
				
				<a href="javascript:void(0);" class="item" data-id="4">
					<i></i>
					<span>酷购商城</span>
				</a>
				
				<a href="javascript:void(0);" class="item" data-id="5">
					<i></i>
					<span>银泰百货东门店</span>
				</a>
				
				<a href="javascript:void(0);" class="item" data-id="6">
					<i></i>
					<span>鄞州万达</span>
				</a>
				
				<a href="javascript:void(0);" class="item" data-id="7">
					<i></i>
					<span>和义大道</span>
				</a>
				
				<a href="javascript:void(0);" class="item" data-id="8">
					<i></i>
					<span>月湖盛园</span>
				</a>
				
				<a href="javascript:void(0);" class="item" data-id="9">
					<i></i>
					<span>银泰百货天一店</span>
				</a>
				
				<div class="footer">
					<a href="javascript:void(0);" class="rule">活动规则</a>
					<a href="javascript:void(0);" class="prize">抽奖信息</a>
				</div>
			</div>
		
			<!--活动规则页-->
			<div class="page page-3">
				<img src="img/rule-bg.jpg" alt="" class="bg"/>
				<div class="scroll">
					<div class="content">
						<p>活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则</p>
						<p>活动规则ending</p>
					</div>
				</div>
				<a href="javascript:void(0);" class="home"></a>
			</div>
			
			<!--我的奖品页-->
			<div class="page page-4">
				<img src="img/prize-bg.jpg" alt="" class="bg"/>
				<div class="content">
					<div class="title">中奖记录</div>
					<div class="no-data">您还未中奖</div>
					<ul class="prize-list" style="display: none;">
						<!--<li>一等奖：小米智能平衡车</li>-->
					</ul>
					<div class="info">
						<p>凭借真实有效的信息领取</p>
						<p>领奖地点：xxxxxxxx</p>
						<p>领奖时间：xx年x月x日至xx年x月x日</p>
						<p>咨询热线：0574-12345678</p>
					</div>
					
					<div class="remain">
						剩余抽奖数（<em>0</em>）
						<!--<a href="javascript:void(0);" class="ui-button getPrize">立即抽奖</a>-->
						<a href="javascript:void(0);" class="ui-button disabled">立即抽奖</a>
					</div>
				</div>
				<a href="javascript:void(0);" class="home"></a>
			</div>
		</div>
		
		<div style="display: none;"><br />
			<div id="sign-box">
				<i class="layer-close"></i>
				<img src="img/poster.jpg" alt="" />
				<a href="javascript:void(0);" class="ui-button sign">立即签到</a>
			</div>
			
			<div id="scan-box">
				<p>亲，签到的商场为<em class="market"></em>，需要扫描匹配的二维码才可完成签到哦</p>
				<p class="tip">（二维码详见商圈海报）</p>
				<a href="javascript:void(0);" class="ui-button continue">继续</a>
			</div>
			
			<div id="success-box">
				<div class="header">
					<div class="status">签到<br />成功</div>
				</div>
				<div class="title">拼人品抽大奖</div>
				<img src="img/prize.png" alt="" />
				<br />
				<a href="javascript:void(0);" class="ui-button getPrize">立即抽奖</a>
			</div>
			
			<!--未中奖-->
			<div id="no-prize-box">
				<div class="status">未中奖~</div>
				<p>做人开心最重要<br />yep宁波送上么么哒！</p>
				<img src="img/kiss.png" alt="" />
				<a href="javascript:void(0);" class="ui-button layer-close">关闭</a>
			</div>
			
			<!--中奖啦-->
			<div id="prize-box">
				<div class="status">恭喜！中奖啦！</div>
				<div class="red-pakage">
					<img src="img/1.jpg" alt="" class="gift"/>
				</div>
				<a href="javascript:void(0);" class="ui-button receive">立即领取</a>
			</div>
			
			<!--填写信息-->
			<div id="regist-box">
				<div class="title">*信息填写</div>
				<div class="ui-item">
					<label for="#username">姓名：</label>
					<input type="text" name="username" id="username"/>
				</div>
				
				<div class="ui-item">
					<label for="#phone">手机：</label>
					<input type="text" name="phone" id="phone" maxlength="11"/>
				</div>
				
				<div class="tips">
					<p>领奖须知</p>
					<p>凭借真实有效的信息领取</p>
					<p>领奖地点：xxxxxxxx</p>
					<p>领奖时间：xx年x月x日至xx年x月x日</p>
					<p>咨询热线：0574-12345678</p>
				</div>
				<a href="javascript:void(0);" class="ui-button sendInfo">立即领取</a>
			</div>
			
			<!--信息提交后弹窗-->
			<div id="result-box">
				<div class="title">领奖须知</div>
				<p class="username">姓名：<em></em></p>
				<p class="phone">电话：<em></em></p>
				<div class="tips">
					<p>领奖须知</p>
					<p>凭借真实有效的信息领取</p>
					<p>领奖地点：xxxxxxxx</p>
					<p>领奖时间：xx年x月x日至xx年x月x日</p>
					<p>咨询热线：0574-12345678</p>
				</div>
				<a href="javascript:void(0);" class="ui-button layer-close">关闭</a>
			</div>
		</div>
		<script src="js/zepto.min.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/iscroll.js"></script>
		<script>
			var remind = function(content,time){
				var str= '<div class="modal"><div id="remind" class="icon-remind-bg"><div class="content">'+content+'</div></div></div>';
				$('body').append(str);
				var time = time?time:1500;
				setTimeout(function(){
					$(".modal").remove();
				},time);
			};
			
			$(function(){
				
				var curPage = 1;
				
				var isEnd = false;    //活动是否结束，默认false未结束
				
				var curMarket = "";
				var curMarketId = "";
				
				var isScene = false;  //是否直接现场扫码
				
				var isRegister = false;  //是否登记过姓名手机号
				
				if(isScene){
					$(".page-1").hide();
					$(".page-2").show();
					layer.open({
						content: $("#success-box")[0].outerHTML,
						shadeClose: false,
						className: "layer-success"
					});
					curPage = 2;
				}else{
					curPage = 1;
				}
				
				//引导打卡
				$(".clock").click(function(){
					$(".page-"+curPage).hide();
					$(".page-2").show();
					curPage = 2;
				});
				
				//签到
				$(".page-2 .item").click(function(){
					var isSign = $(this).hasClass("active");  //是否已签到
					if(isSign){
						$("#sign-box").addClass("disabled");
						$("#sign-box .ui-button").text("已签到").removeClass("sign");
					}else{
						$("#sign-box").removeClass("disabled");
						$("#sign-box .ui-button").text("立即签到").addClass("sign");
					}
					if(isEnd){
						$("#sign-box").addClass("disabled");
						$("#sign-box .ui-button").text("活动已结束").removeClass("sign");
					}
					
					curMarket = $(this).find('span').text();
					curMarketId = $(this).data('id');
					
					layer.open({
						content: $("#sign-box")[0].outerHTML,
						shadeClose: false,
						className: "layer-sign"
					});
				});
				
				//关闭弹窗
				$(document).on('click','.layer-close',function(){
					layer.closeAll();
				});
				
				//立即签到
				$(document).on('click','.sign',function(){
					$("#scan-box .market").text(curMarket);
					layer.open({
						content: $("#scan-box")[0].outerHTML,
						shadeClose: false,
						className: "layer-scan"
					});
				});
				
				//调用微信扫码接口
				$(document).on('click','.continue',function(){
					//扫码成功后返回结果
					layer.open({
						content: $("#success-box")[0].outerHTML,
						//shadeClose: false,
						className: "layer-success"
					});
					//添加已签到商场标记
					$("[data-id='"+curMarketId+"']").addClass("active");
				});
				
				//活动规则
				var myScroll = null;
				$(".rule").click(function(){
					$(".page-"+curPage).hide();
					$(".page-3").show();
					curPage = 3;
					if(!myScroll){
						//活动规则滚动
						myScroll = new IScroll('.scroll',{ 
							scrollY: true,
							scrollbars: 'custom',
							preventDefaultException: { tagName: /^(DIV|IMG|A|BUTTON|INPUT)$/ }
						});
					}
				});
				
				//抽奖信息
				$(".prize").click(function(){
					$(".page-"+curPage).hide();
					$(".page-4").show();
					curPage = 4;
				});
				
				//立即抽奖
				$(document).on('click','.getPrize',function(){
					layer.open({
						content:'<img src="img/animated.gif"/>',
						shadeClose: false,
						className: "layer-animated"
					});
					
					$.ajax({
						type:"get",
						url:"data/lottery.json",
						dataType: "json",
						data: {},
						success: function(data){
							setTimeout(function(){
								if(data.lottery){
									var prize = data.prize;
									var prizeName = data.prizeName;
									$(".prize-list").append('<li>'+prizeName+'</li>');
									$(".no-data").hide();
									$(".prize-list").show();
									$("#prize-box .gift").attr('src','img/'+prize+'.jpg');
									layer.open({
										content: $("#prize-box")[0].outerHTML,
										shadeClose: false,
										className: "layer-prize"
									});
								}else{
									//未中奖
									layer.open({
										content: $("#no-prize-box")[0].outerHTML,
										shadeClose: false,
										className: "layer-prize"
									});
								}
							},2000);
						}
					});
				});
				
				//立即领取
				$(document).on('click','.receive',function(){
					if(!isRegister){
						//填写信息
						layer.open({
							content: $("#regist-box")[0].outerHTML,
							shadeClose: false,
							className: "layer-regist"
						});
					}else{
						$.ajax({
							type:"get",
							url:"data/request.json",
							dataType: "json",
							data: {},
							success: function(data){
								$("#result-box .username em").text(data.username);
								$("#result-box .phone em").text(data.phone);
								layer.open({
									content: $("#result-box")[0].outerHTML,
									shadeClose: false,
									className: "layer-regist"
								});
							}
						});
					}
				});
				
				//填完信息领取
				$(document).on('click','.sendInfo',function(){
					var username = $(".layermbox #username").val();
					var phone = $(".layermbox #phone").val();
					if(username==""){
						remind("请填写姓名");
						return;
					}
					if(phone==""){
						remind("请填写手机号");
						return;
					}
					if (!/^1[34578]\d{9}/.test(phone)) {
						remind('请输入正确的手机号码');
						return;
					}
					$.ajax({
						type:"get",
						url:"data/request.json",
						dataType: "json",
						data: {username:username,phone:phone},
						success: function(data){
							$("#result-box .username em").text(data.username);
							$("#result-box .phone em").text(data.phone);
							layer.open({
								content: $("#result-box")[0].outerHTML,
								shadeClose: false,
								className: "layer-regist"
							});
							isRegister = true;
						}
					});
				});
				
				//返回首页
				$(".home").click(function(){
					$(".page-"+curPage).hide();
					$(".page-2").show();
					curPage = 2;
				});
			});
		</script>
	</body>
</html>